<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
// const percentage = ref(0);
const show = defineModel("show", { type: Boolean, default: false });
const percentage = defineModel<number | string>("process", { default: 0 });
const type =  defineModel<number | string>("type", { default: 0 });
let timer: any;

onMounted(() => {
  // timer = setInterval(() => {
  //   if (percentage.value >= 99) {
  //     clearInterval(timer);
  //   } else {
  //     percentage.value += 1;
  //   }
  // }, 60);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<template>
  <el-dialog
    width="50%"
    v-model="show"
    class="!bg-[#0000] !shadow-none"
    :show-close="false"
    align-center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    modal-class="!bg-gray-500"
  >
    <div class="loader"></div>
    <div class="w-full h-2 mx-auto rounded bg-[#e5e5e5]">
      <div
        class="h-full bg-primary rounded flex items-center justify-end transition-[width]"
        :style="{ width: `${percentage}%` }"
      >
        <div
          class="h-5 flex items-center rounded-xl bg-primary text-white text-xs px-1.5"
        >
          {{ percentage }}%
        </div>
      </div>
      <div style="text-align: center;margin-top: 20px;" class="text-white">正在{{ type == 0 ? '兑领中' : '添加中' }}，请稍等..</div>
    </div>
  </el-dialog>
</template>

<style scoped>
.loader {
  color: #ffffff;
  font-size: 45px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  transform: translateZ(0);
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  animation:
    mltShdSpin 1.7s infinite ease,
    round 1.7s infinite ease;
}
@keyframes mltShdSpin {
  0% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      0 -0.83em 0 -0.42em,
      0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em,
      0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      0 -0.83em 0 -0.42em,
      0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em,
      0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      -0.087em -0.825em 0 -0.42em,
      -0.173em -0.812em 0 -0.44em,
      -0.256em -0.789em 0 -0.46em,
      -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      -0.338em -0.758em 0 -0.42em,
      -0.555em -0.617em 0 -0.44em,
      -0.671em -0.488em 0 -0.46em,
      -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      -0.377em -0.74em 0 -0.42em,
      -0.645em -0.522em 0 -0.44em,
      -0.775em -0.297em 0 -0.46em,
      -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow:
      0 -0.83em 0 -0.4em,
      0 -0.83em 0 -0.42em,
      0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em,
      0 -0.83em 0 -0.477em;
  }
}

@keyframes round {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
